import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes';
import Header from './components/Header';

export default function App() {

  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes);

  // 修改isActive为true的高亮效果
  function computedClassName({isActive}) {
    return isActive ? 'list-group-item atguigu' : 'list-group-item';
  }

  return (
    <div>
      <div className="row">
        <div className="offset-2 col-xl-8">
          <Header/>
        </div>
      </div>
      <div className="row">
        <div className="col-xl-2 offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className={computedClassName} to="/about">About</NavLink>
            <NavLink className={computedClassName} end to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xl-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              { element }
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
